M

MLOG

Latviešu

Atklājiet mērogojamas un dinamiskas UI Next.js. Mūsu ceļvedis aptver maršrutu grupas un paralēlos maršrutus sarežģītiem paneļiem. Pilnveidojieties tagad!

Next.js App Router apgūšana: padziļināta ielūkošanās maršrutu grupu un paralēlo maršrutu arhitektūrā

Next.js App Router izlaišana iezīmēja paradigmas maiņu veidā, kā izstrādātāji veido tīmekļa lietojumprogrammas ar populāro React ietvaru. Attālinoties no Pages Router uz failiem balstītajām konvencijām, App Router ieviesa jaudīgāku, elastīgāku un uz serveri centrētu modeli. Šī evolūcija dod mums iespēju radīt ļoti sarežģītas un veiktspējīgas lietotāja saskarnes ar lielāku kontroli un organizāciju. Starp transformējošākajām ieviestajām funkcijām ir Maršrutu grupas (Route Groups) un Paralēlie maršruti (Parallel Routes).

Izstrādātājiem, kuri vēlas veidot uzņēmuma līmeņa lietojumprogrammas, šo divu koncepciju apgūšana ir ne tikai noderīga — tā ir būtiska. Tās risina izplatītas arhitektūras problēmas, kas saistītas ar izkārtojuma pārvaldību, maršrutu organizēšanu un dinamisku, vairāku paneļu saskarņu, piemēram, vadības paneļu, izveidi. Šī rokasgrāmata sniedz visaptverošu Maršrutu grupu un Paralēlo maršrutu izpēti, pārejot no pamatkoncepcijām uz progresīvām ieviešanas stratēģijām un labāko praksi globālai izstrādātāju auditorijai.

Izpratne par Next.js App Router: ātrs atgādinājums

Pirms mēs iedziļināmies detaļās, īsi atkārtosim App Router pamatprincipus. Tā arhitektūra ir balstīta uz direktoriju sistēmu, kur mapes definē URL segmentus. Īpaši faili šajās mapēs definē UI un uzvedību attiecīgajam segmentam:

Šī struktūra, apvienojumā ar React Server Components (RSC) noklusējuma izmantošanu, veicina uz serveri orientētu pieeju, kas var ievērojami uzlabot veiktspēju un datu ielādes modeļus. Maršrutu grupas un Paralēlie maršruti ir progresīvas konvencijas, kas balstās uz šī pamata.

Maršrutu grupu demistifikācija: projekta organizēšana saprātam un mērogam

Lietojumprogrammai augot, maršrutu skaits var kļūt grūti pārvaldāms. Jums varētu būt lapu kopa mārketingam, cita lietotāju autentifikācijai un trešā galvenajam lietojumprogrammas panelim. Loģiski tās ir atsevišķas sadaļas, bet kā tās organizēt failu sistēmā, nepiesārņojot URL? Tieši šo problēmu risina Maršrutu grupas.

Kas ir Maršrutu grupas?

Maršrutu grupa ir mehānisms, kā organizēt failus un maršrutu segmentus loģiskās grupās, neietekmējot URL struktūru. Jūs izveidojat maršrutu grupu, ietverot mapes nosaukumu iekavās, piemēram, (marketing) vai (app).

Mapes nosaukums iekavās ir paredzēts tikai organizatoriskiem mērķiem. Next.js to pilnībā ignorē, nosakot URL ceļu. Piemēram, fails, kas atrodas app/(marketing)/about/page.js, tiks pasniegts ar URL /about, nevis /(marketing)/about.

Galvenie pielietojuma gadījumi un Maršrutu grupu priekšrocības

Lai gan vienkārša organizācija ir priekšrocība, Maršrutu grupu patiesais spēks slēpjas to spējā sadalīt jūsu lietojumprogrammu sadaļās ar atšķirīgiem, koplietotiem izkārtojumiem.

1. Dažādu izkārtojumu izveide maršrutu segmentiem

Šis ir visizplatītākais un jaudīgākais pielietojuma gadījums. Iedomājieties tīmekļa lietojumprogrammu ar divām galvenajām sadaļām:

Bez Maršrutu grupām dažādu saknes izkārtojumu piemērošana šīm sadaļām būtu sarežģīta. Ar Maršrutu grupām tas ir neticami intuitīvi. Katrā grupā varat izveidot unikālu layout.js failu.

Šeit ir tipiska failu struktūra šim scenārijam:

app/
├── (marketing)/
│   ├── layout.js      // Publisks izkārtojums ar mārketinga galveni/kājeni
│   ├── page.js        // Tiek renderēts adresē '/'
│   └── about/
│       └── page.js    // Tiek renderēts adresē '/about'
├── (app)/
│   ├── layout.js      // Paneļa izkārtojums ar sānjoslu
│   ├── dashboard/
│   │   └── page.js    // Tiek renderēts adresē '/dashboard'
│   └── settings/
│       └── page.js    // Tiek renderēts adresē '/settings'
└── layout.js          // Saknes izkārtojums (piem., <html> un <body> tagiem)

Šajā arhitektūrā:

2. Segmenta izslēgšana no koplietota izkārtojuma

Dažreiz konkrētai lapai vai sadaļai ir pilnībā jāatbrīvojas no vecāka izkārtojuma. Biežs piemērs ir norēķinu process vai īpaša galvenā lapa, kurai nevajadzētu būt galvenās vietnes navigācijai. To var panākt, ievietojot maršrutu grupā, kas nekoplieto augstāka līmeņa izkārtojumu. Lai gan tas izklausās sarežģīti, tas vienkārši nozīmē piešķirt maršrutu grupai savu augstākā līmeņa layout.js, kas nerenderē `children` no saknes izkārtojuma.

Praktisks piemērs: vairāku izkārtojumu lietojumprogrammas izveide

Izveidosim minimālu versiju iepriekš aprakstītajai mārketinga/lietotnes struktūrai.

1. Saknes izkārtojums (app/layout.js)

Šis izkārtojums ir minimāls un attiecas uz katru lapu. Tas definē būtisko HTML struktūru.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Mārketinga izkārtojums (app/(marketing)/layout.js)

Šis izkārtojums ietver publiski pieejamu galveni un kājeni.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>Marketing Header</header>
      <main>{children}</main>
      <footer>Marketing Footer</footer>
    </div>
  );
}

3. Lietotnes paneļa izkārtojums (app/(app)/layout.js)

Šim izkārtojumam ir atšķirīga struktūra, kas ietver sānjoslu autentificētiem lietotājiem.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        Dashboard Sidebar
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

Ar šo struktūru, navigējot uz /about, lapa tiks renderēta ar `MarketingLayout`, savukārt navigējot uz /dashboard, tā tiks renderēta ar `AppLayout`. URL paliek tīrs un semantisks, kamēr mūsu projekta failu struktūra ir perfekti organizēta un mērogojama.

Dinamisku UI atklāšana ar Paralēlajiem maršrutiem

Kamēr Maršrutu grupas palīdz organizēt atšķirīgas lietojumprogrammas sadaļas, Paralēlie maršruti risina citu izaicinājumu: vairāku, neatkarīgu lapu skatu attēlošanu vienā izkārtojumā. Tā ir izplatīta prasība sarežģītiem paneļiem, sociālo mediju plūsmām vai jebkurai UI, kur dažādi paneļi ir jārenderē un jāpārvalda vienlaicīgi.

Kas ir Paralēlie maršruti?

Paralēlie maršruti ļauj vienlaikus renderēt vienu vai vairākas lapas vienā izkārtojumā. Šie maršruti tiek definēti, izmantojot īpašu mapju konvenciju, ko sauc par slotiem (slots). Sloti tiek izveidoti, izmantojot @mapesNosaukums sintaksi. Tie nav daļa no URL struktūras; tā vietā tie tiek automātiski nodoti kā parametri (props) tuvākajam koplietotajam vecāka `layout.js` failam.

Piemēram, ja jums ir izkārtojums, kurā nepieciešams vienlaicīgi attēlot komandas aktivitāšu plūsmu un analītikas diagrammu, varat definēt divus slotus: `@team` un `@analytics`.

Pamatideja: Sloti

Iedomājieties slotus kā nosauktus vietturus jūsu izkārtojumā. Izkārtojuma fails skaidri pieņem šos slotus kā parametrus un izlemj, kur tos renderēt.

Apsveriet šo izkārtojuma komponentu:

// Izkārtojums, kas pieņem divus slotus: 'team' un 'analytics'
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

Šeit `children`, `team` un `analytics` ir visi sloti. `children` ir netiešs slots, kas atbilst standarta `page.js` direktorijā. `team` un `analytics` ir tieši sloti, kas jāizveido ar `@` prefiksu failu sistēmā.

Galvenās iezīmes un priekšrocības

Reālās pasaules scenārijs: sarežģīta paneļa izveide

Izstrādāsim paneli ar URL /dashboard. Tam būs galvenā satura zona, komandas aktivitāšu panelis un veiktspējas analītikas panelis.

Failu struktūra:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // UI analītikas slotam
    │   └── loading.js     // Ielādes UI specifiski analītikai
    ├── @team/
    │   └── page.js          // UI komandas slotam
    ├── layout.js            // Izkārtojums, kas organizē slotus
    └── page.js              // Netiešais 'children' slots (galvenais saturs)

1. Paneļa izkārtojums (app/dashboard/layout.js)

Šis izkārtojums saņem un sakārto trīs slotus.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // Aizstāt ar reālu autorizācijas loģiku

  return isLoggedIn ? (
    <div>
      <h1>Main Dashboard</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>Team Activity</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>Performance Analytics</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>Please log in to view the dashboard.</div>
  );
}

2. Slotu lapas (piem., app/dashboard/@analytics/page.js)

Katra slota `page.js` fails satur UI konkrētajam panelim.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // Simulēt tīkla pieprasījumu
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>Page Views: {data.views}</p>
      <p>Revenue: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>Loading analytics data...</p>;
}

Ar šo iestatījumu, kad lietotājs navigē uz /dashboard, Next.js renderēs `DashboardLayout`. Izkārtojums saņems renderēto saturu no dashboard/page.js, dashboard/@team/page.js un dashboard/@analytics/page.js kā parametrus un attiecīgi tos izvietos. Būtiski, ka analītikas panelis rādīs savu `loading.js` stāvokli 3 sekundes, nebloķējot pārējā paneļa renderēšanu.

Neatbilstošu maršrutu apstrāde ar `default.js`

Rodas kritisks jautājums: Kas notiek, ja Next.js nevar iegūt slota aktīvo stāvokli pašreizējam URL? Piemēram, sākotnējās ielādes vai lapas pārlādes laikā URL varētu būt /dashboard, kas nesniedz konkrētus norādījumus, ko rādīt @team vai @analytics slotos. Pēc noklusējuma Next.js renderētu 404 kļūdu.

Lai to novērstu, mēs varam nodrošināt rezerves UI, izveidojot default.js failu paralēlajā maršrutā.

Piemērs:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>No analytics data selected.</p>
    </div>
  );
}

Tagad, ja analītikas slots nav saskaņots, Next.js renderēs default.js saturu, nevis 404 lapu. Tas ir būtiski, lai radītu plūstošu lietotāja pieredzi, īpaši sarežģītas paralēlo maršrutu sistēmas sākotnējā ielādē.

Maršrutu grupu un Paralēlo maršrutu apvienošana progresīvām arhitektūrām

App Router patiesais spēks tiek realizēts, kad apvienojat tā funkcijas. Maršrutu grupas un Paralēlie maršruti lieliski sadarbojas, lai radītu sarežģītas un ļoti organizētas lietojumprogrammu arhitektūras.

Pielietojuma gadījums: Vairāku režīmu satura skatītājs

Iedomājieties platformu, piemēram, multivides galeriju vai dokumentu skatītāju, kur lietotājs var apskatīt vienumu, bet arī atvērt modālo logu, lai redzētu tā detaļas, nezaudējot fona lapas kontekstu. To bieži sauc par "Pārtverošo maršrutu" (Intercepting Route), un tas ir spēcīgs modelis, kas balstīts uz paralēlajiem maršrutiem.

Izveidosim foto galeriju. Noklikšķinot uz fotoattēla, tas atveras modālajā logā. Bet, ja atsvaidzināt lapu vai navigējat uz fotoattēla URL tieši, tam vajadzētu parādīt īpašu lapu šim fotoattēlam.

Failu struktūra:

app/
├── @modal/(..)(..)photos/[id]/page.js  // Pārtvertais maršruts modālajam logam
├── photos/
│   └── [id]/
│       └── page.js                  // Īpašā foto lapa
├── layout.js                        // Saknes izkārtojums, kas saņem @modal slotu
└── page.js                          // Galvenā galerijas lapa

Paskaidrojums:

Šis modelis apvieno paralēlos maršrutus (@modal slots) ar progresīvām maršrutēšanas konvencijām, lai radītu nevainojamu lietotāja pieredzi, ko būtu ļoti sarežģīti ieviest manuāli.

Labākā prakse un izplatītākās kļūdas

Maršrutu grupu labākā prakse

Paralēlo maršrutu labākā prakse

Izplatītākās kļūdas, no kurām jāizvairās

Secinājums: Nākotnes tīmekļa lietojumprogrammu veidošana

Next.js App Router ar tādām funkcijām kā Maršrutu grupas un Paralēlie maršruti nodrošina robustu un mērogojamu pamatu modernai tīmekļa izstrādei. Maršrutu grupas piedāvā elegantu risinājumu koda organizēšanai un atšķirīgu izkārtojumu piemērošanai, neapdraudot URL semantiku. Paralēlie maršruti atslēdz iespēju veidot dinamiskas, vairāku paneļu saskarnes ar neatkarīgiem stāvokļiem, kas iepriekš bija sasniedzams tikai ar sarežģītu klienta puses stāvokļa pārvaldību.

Izprotot un apvienojot šos jaudīgos arhitektūras modeļus, jūs varat pāriet no vienkāršām vietnēm uz sarežģītu, veiktspējīgu un uzturamu lietojumprogrammu veidošanu, kas atbilst mūsdienu lietotāju prasībām. Mācīšanās līkne var būt stāvāka nekā klasiskajam Pages Router, bet ieguvums lietojumprogrammu arhitektūras un lietotāja pieredzes ziņā ir milzīgs. Sāciet eksperimentēt ar šīm koncepcijām savā nākamajā projektā un atklājiet pilnu Next.js potenciālu.